Button component

The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.

Contained Button

The use of elevation and fill classifies contained buttons as high-emphasis. They contain the essential actions in your project. To use button component add class name btnto button tag. For different colors use class names color-bg-primary, color-bg-secondary, color-bg-error, color-bg-success, color-bg-warning accordingly. If color is not provided default color would be used.

Outline Button

These buttons give you an option to opt out for the massive and weightly features, and be simple To use outline button component add class name btnand color associated. For different colors use class names color-primary-outline, color-secondary-outline, color-error-outline, color-success-outline, color-warning-outlineaccordingly. If color is not provided default color would be used.

Link button

Do you want to add a link action to a button click? Here it is! To use link button add class name btn-link

Text button

To use text button add class name btn-color-text-primary, btn-color-text-secondary

Icon button

To use icon button add the icon in span tag inside the button with the required variant class name

Floating Action Button

To use floating action button wrap the button inside the badge-containerclass name

Different Button Sizes

To use different sizes button add class name btn-sm, btn-mdaccordingly. If size is not provided default size would be used.

Round pill button

To use round pill button add class name round-pill